<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="form-container">
      <el-form :model="postForm" ref="postForm" :rules="rules">
        <el-form-item label="Email" prop="email">
          <el-input v-model="postForm.email" readonly ></el-input>
        </el-form-item>
        <el-form-item label="文字描述" prop="text">
          <el-input type="textarea" v-model="postForm.text"></el-input>
        </el-form-item>
        <el-form-item label="文章类别" prop="title">
          <el-select v-model="postForm.title">
            <el-option v-for="item in titleOptions" :key="item.id" :label="item.id" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期刊编号" prop="journalId">
          <el-select v-model="postForm.journalId">
            <el-option v-for="item in journalOptions" :key="item.journalid" :label="item.name" :value="item.journalid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="file">
          <el-upload
            class="upload-demo"
            action="/api/file/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :on-success="handleSuccess"
          >
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="btn-group">
        <el-button type="success" icon="el-icon-check" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </div>

</template>

<script>
import { getAllJournal } from '@/api/journal'
import { commitManiscript } from '@/api/manuscript'
import { isPefectInfo } from '@/api/user'

export default {
  name: 'SendManuscript',
  data () {
    return {
      pageLoading: false,
      titleOptions: [
        {
          id: '文学'
        },
        {
          id: '科学'
        },
        {
          id: '医学'
        },
        {
          id: '艺术'
        },
        {
          id: '计算机'
        },
        {
          id: '人文'
        }
      ],
      id: '',
      email: '',
      journalOptions: [],
      status: false,
      postForm: {
        email: this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email'),
        text: '',
        title: '',
        journalId: '',
        file: ''
      },
      rules: {
        email: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        text: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        title: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        journalId: [{required: true, message: '此栏不可为空', trigger: 'change'}],
        file: [{required: true, message: '此栏不可为空', trigger: 'change'}]
      }
    }
  },
  created () {
    this.initData()
    this.getJournal()
    this.isPerfect()
  },
  methods: {
    initData () {
      this.id = this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid')
      this.email = this.$store.state.user.email !== '' ? this.$store.state.user.email : localStorage.getItem('email')
    },
    getJournal () {
      getAllJournal().then(res => {
        const data = res.data.data
        this.journalOptions = data
      })
    },
    isPerfect () {
      isPefectInfo({
        userid: this.id
      }).then(res => {
        console.log(res)
        if (res.data.msg === '用户信息未完善') {
          this.$message.info('您的用户信息未完善，请前往个人中心进行资料完善')
          this.status = false
        } else {
          this.status = true
        }
      }).catch(() => {

      })
    },
    handleConfirm () {
      this.pageLoading = true
      console.log(this.status)
      if (this.status) {
        this.$refs['postForm'].validate(valid => {
          if (valid) {
            commitManiscript(this.postForm).then(res => {
              this.$message.success('提交文章成功')
              this.$refs['postForm'].resetFields()
              this.getManuscript()
              this.pageLoading = false
            }).catch(() => {
              this.pageLoading = false
            })
          } else {
            this.pageLoading = false
            return false
          }
        })
      } else {
        this.pageLoading = false
        this.$message.info('您的用户信息未完善，请前往个人中心进行资料完善')
      }
    },
    handleSuccess (response, file, fileList) {
      this.postForm.file = response.data
    },
    handleRemove (file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview (file) {
      // console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  .form-container{
    padding: 20px;
    width: 50%;
    margin: 0 auto;
    position: relative;
    .btn-group{
      position: absolute;
      right: 20px;
    }
  }
}

</style>
